<template>
    <div>
        <h-collapse>
            <template #title>
                <flexbox class="title">
                    <span>产线能效分析</span>
                    <!-- <img class="margin-l-8" src="@/assets/images/chart/tooltip.png" @click.stop="handleShowTipModal" /> -->
                </flexbox>
            </template>
            <div class="card hover-shadow">
                <div style="margin-top: 12px">
                    <a-form layout="inline" :model="form">
                        <a-row>
                            <a-col :span="7">
                                <a-form-item label="选择时间">
                                    <h-range-picker-cell
                                        :allowClear="false"
                                        :value="[
                                            form['startTime'] ? $moment(form['startTime'], 'YYYY-MM-DD') : null,
                                            form['endTime'] ? $moment(form['endTime'], 'YYYY-MM-DD') : null,
                                        ]"
                                        @change="rangeDateChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="统计项">
                                    <a-select style="width: 140px" v-model:value="type" @change="handleSelectChange">
                                        <a-select-option :key="item.value" v-for="item of typeOptions"> {{ item.title }} </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div class="card-cont">
                    <h-bar-chart :option="lineOption" />
                </div>
            </div>
        </h-collapse>
    </div>
</template>

<script lang="ts">
import moment from 'moment';
import api from '@/api';
import { HRangePickerCell, HSearchSelectCell } from '@/components';
import HCollapse from '@/views/insideCharts/pmpAndJiraChart/pmpChart/components/HCollapse.vue';
import { HBarChart } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HBarChart,
        HCollapse,
        HRangePickerCell,
        HSearchSelectCell
    },
    setup() {
        const state = reactive<any>({
            lineOption: {},
            form: {
                // startTime: moment()
                //     .year(moment().year() - 1)
                //     .startOf('year')
                //     .format('YYYY-MM-DD HH:mm:ss'),
                // endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                startTime: moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss'),
                endTime: moment().format('YYYY-MM-DD HH:mm:ss')
            },
            type: 'onlineAvgDays',
            typeOptions: [
                { title: '及时性占比', value: 'jishixing' },
                { title: '开发平均周期', value: 'devAvgDays' },
                { title: '平均测试周期', value: 'testAvgDays' },
                { title: '平均上线周期', value: 'onlineAvgDays' },
                { title: '平均需求转化周期', value: 'convertAvgDays' }
            ],
            list: []
        });
        const handleSelectChange = (val) => {
            state.type = val;
            initData();
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            if (state.form.startTime !== startTime || state.form.endTime !== endTime) {
                state.form.startTime = startTime;
                state.form.endTime = endTime;
                getData();
            }
        };
        const getData = async () => {
            const query = {
                ...state.form
            };
            const { success, moule } = await api.efficiencyStatisticsModel.getEfficiencyLineTendency(query);
            if (success) {
                state.list = [...moule];
            }
            initData();
        };
        const initData = () => {
            let systemArr: any[] = [];
            let dataArr: any[] = [];
            if (state.type === 'jishixing') {
                dataArr = state.list.map((item) => {
                    if (item.onTimeCount && item.overTimeCount) {
                        const val: any = item.onTimeCount / (item.overTimeCount + item.onTimeCount);
                        return (val * 100).toFixed(2);
                    } else {
                        return 0;
                    }
                });

                const list: any[] = [];
                state.list.forEach((item: any) => {
                    if (item.isOutsideSystem !== '1') {
                        list.push(item.systemName);
                    }
                });
                systemArr = [...list];
            } else {
                dataArr = state.list.map((item) => item[state.type]);
                systemArr = state.list.map((item) => item.systemName);
            }
            const target = state.typeOptions.find((item) => item.value === state.type);
            state.lineOption = {
                tooltip:
                    state.type === 'jishixing'
                        ? {
                            trigger: 'axis',
                            formatter: '{c}%' //这是关键，在需要的地方加上就行了
                        }
                        : {
                            trigger: 'axis',
                            formatter: '{c}' //这是关键，在需要的地方加上就行了
                        },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: ['系统']
                },
                yAxis: {
                    name: target.title,
                    nameLocation: 'center', // 垂直居中
                    nameRotate: 90, // 旋转90度
                    nameGap: 80, // 距离y轴距离
                    axisLabel:
                        state.type === 'jishixing'
                            ? {
                                formatter: '{value} %'
                            }
                            : {
                                formatter: '{value} '
                            }
                },
                xArr: [...systemArr],
                series: [
                    {
                        name: '系统',
                        data: [...dataArr],
                        type: 'bar',
                        barWidth: 10
                    }
                ]
            };
        };
        getData();
        return {
            ...toRefs(state),
            handleSelectChange,
            rangeDateChange
        };
    }
});
</script>

<style scoped lang="less">
.card {
    min-height: 372px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    &-cont {
        padding: 24px;
        height: 648px;
    }
}
</style>